﻿@{
    ViewBag.Title = "CheckOut";
}

@section scripts{

    <script src="https://checkout.stripe.com/checkout.js"></script>

    <script>
        var handler = StripeCheckout.configure({
            key: '@ViewBag.StripeApiKey',
            locale: 'auto',
            token: function (token) {
                var amount = $("#txtAmount").val();
                var transaction = $("#txtTransaction").val();

                window.location.href = "@Url.Action("CheckOutProcessing", "Charge")" + "?token=" + token.id + "&amount=" + amount + "&extraTransactionInfo=" + transaction;
            }
        });

        $('#customButton').on('click', function (e) {

            var txtAmount = $("#txtAmount");
            var txtTransaction = $("#txtTransaction");
            if (txtAmount.val().trim() == "") {
                alert("Amount cannot be empty");
                txtAmount.focus();
                return;
            }
            if (!$.isNumeric(txtAmount.val())) {
                alert("Amount must be numeric");
                txtAmount.focus();
                return;
            }
            if (txtTransaction.val().trim() == "") {
                alert("Extra Transaction Info cannot be empty");
                txtTransaction.focus();
                return;
            }

            // Open Checkout with further options
            handler.open({
                name: 'TidyPal',
                description: 'Just a demo',
                amount: parseInt(txtAmount.val()) * 100
            });
            e.preventDefault();
        });

        // Close Checkout on page navigation
        $(window).on('popstate', function () {
            handler.close();
        });
    </script>
}

<h2>CheckOut</h2>

@ViewBag.Message

@Html.ValidationSummary(true)

<div class="form-group">
    <label class="control-label col-md-2">
        Amount
    </label>
    <div class="col-md-10">
        <input type="text" id="txtAmount" />
    </div>
</div>
<div class="form-group">
    <label class="control-label col-md-2">
        ExtraTransactionInfo
    </label>
    <div class="col-md-10">
        <input type="text" id="txtTransaction" />
    </div>
</div>
<div class="form-group">
    <div class="col-md-offset-2 col-md-10">
        <button id="customButton" class="btn btn-primary">Purchase</button>
    </div>
</div>
